<template>
  <page-header-wrapper>

    <template #extra>
      <a-button type="primary" @click="toRoute('/config/self-define-page-add')">
        创建页面
      </a-button>
    </template>

    <div class="table-page-search-wrapper">
      <a-card>
        <a-form layout="inline" style="margin-bottom: 5px;">
          <a-row :gutter="48">
            <a-col :xl="6" :lg="8" :md="12" :xs="24">
              <a-form-item label="ID">
                <a-input v-model="search.id"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="8" :md="12" :xs="24">
              <a-form-item label="标题">
                <a-input v-model="search.name"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="8" :md="12" :xs="24">
              <a-form-item label="每页条数">
                <a-select :default-value="5" @change="handlePageSize">
                  <a-select-option :value="value" v-for="value in pageSizeSelect" :key="value">
                    {{ value }}条/页
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :xl="6" :lg="8" :md="12" :xs="24">
              <a-button type="primary" @click="handleTableChange">查询</a-button>
            </a-col>
          </a-row>
        </a-form>
        <a-table :pagination="pagination" bordered
                 :data-source="data" :loading="loading"
                 size="small" :columns="columns"
                 @change="handleTableChange">
          <span slot="action" slot-scope="text,record">
            <a-button type="link" size="small" @click="toPageConfig(record)">查看详情</a-button>
            <a-button type="link" size="small">禁用</a-button>
            <a-button type="link" size="small">启用</a-button>
            <a-button type="link" size="small">删除</a-button>
          </span>
        </a-table>
      </a-card>
    </div>
  </page-header-wrapper>

</template>
<script>

import router from "@/router";
import {searchGoodByPage} from "@/api/modules/GoodRequest";
import {searchDiyByPage} from "@/api/modules/DiyRequest";

const columns = [
  {
    "dataIndex": "id",
    "title": "ID"
  },
  {
    "dataIndex": "name",
    "title": "页面名称",
  },
  {
    "dataIndex": "details",
    "title": "页面描述",
  },
  {
    "dataIndex": "id",
    "title": "页面链接",
    customRender(text,record) {
      return '/#/public/page/'+text;
    }
  },
  {
    "dataIndex": "state",
    "title": "页面状态",
    customRender(text) {
      return ['已关闭','可访问'][Number(text)]
    }
  },
  {
    "title": "操作",
    scopedSlots: {customRender: 'action'},
  },

  // {
  //   "dataIndex": "isSpecial",
  //   "title": "是否为特殊用户",
  //   scopedSlots: {customRender: 'isSpecial'},
  // }
]

export default {
  name: "SelfDefinePageConfig",
  data() {
    return {
      search:{
      },
      loading:false,
      data: [],
      columns: columns,
      pagination: {
        pageSize: "5",
        current: 1,
        total: 0
      },
      pageSizeSelect: [
        '5', '10', '20', '50', '100'
      ],
    }
  },
  mounted() {
    this.init();
  },
  methods:{
    async init() {
      await this.handleTableChange({
        current: 1
      });
    },
    async handlePageSize(value) {
      this.pagination.pageSize = value.toString();
      await this.handleTableChange();
    },
    async toSearchPage(){
      let _this=this;
      if (this.pagination.current == null) this.pagination.current = 1;
      for (let searchKey in this.search) {
        if(this.search[searchKey]==null||this.search[searchKey].toString().trim().length===0){
          delete this.search[searchKey]
        }else {
          this.search[searchKey]=this.search[searchKey].toString().trim()
        }
      }
      searchDiyByPage(Object.assign({
        current: this.pagination.current,
        size: this.pagination.pageSize,
      },this.search)).then((res) => {
        if (res.status === 200) {
          _this.data = res.data.records
          _this.pagination.total = res.data.total
          _this.pagination.current = res.data.current
          _this.pagination.pageSize = res.data.size.toString()
        } else {
          _this.$notification.warning({
            message: res.message
          })
        }
      });
    },
    async handleTableChange(pagination) {
      this.loading = true;
      if (pagination != null) this.pagination.current = pagination.current
      await this.toSearchPage();
      this.loading = false;
    },
    toPageConfig(e) {
      router.push({
        path: '/config/self-define-page/' + e.id
      })
    },
    toRoute(path){
      router.push({
        path
      })
    }
  }
}
</script>

<style scoped>

</style>